﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>登陆页面</title>

<link rel="stylesheet" type="text/css" href="/css/login.css">

<script type="text/javascript" src="/js/jquery2.1.4.js"></script>
<script type="text/javascript" src="/js/login.js"></script>

</head>
<body>

<div id="container">
	<div id="output">
		<div class="containerT">
			<span style="font-size: 50px">澳宝管理系统</span>
			<h1>用户登录</h1>
			<form class="form" id="loginForm">
				<input type="text" name="loginName" placeholder="用户名" id="loginName">
				<input type="password" name="loginPwd" placeholder="密码" id="loginPwd">
				<button type="button" id="loginBtn">登录</button>
				<div id="prompt" class="prompt"></div>
			</form>
		</div>
	</div>
</div>

<script type="text/javascript">
    $(function(){
        Victor("container", "output");   //登陆背景函数
        $("#loginName").focus();
        $(document).keydown(function(event){
        	//回车事件
            if(event.keyCode==13){
				if(isLogidNull()){
					loginFrom();
				}
            }
        });
    });

    //点击事件
	$("#loginBtn").click(function () {
		if(isLogidNull()){
			loginFrom();
		}
	});

	//登陆
	function loginFrom(){

		$.post("/user/login", {
			loginName: $('#loginForm input[name="loginName"]').val(),
			loginPwd: $('#loginForm input[name="loginPwd"]').val()
		},function (data) {
			chuLi(data);//调用转向函数
		})
	}

	function chuLi(jsonData) {
		//界面会alert提示undefined，所以应该是没能正确解析返回的串
		//var d=	eval("("+jsonData+")");
		if(jsonData.statu==200){
			window.location.href = "/user/index.html";
		}else{
            var message=jsonData.message;
			$("#prompt").html(message);
			if(message=="账户不存在"){
                $("#loginName").focus();
            }else{
                $("#loginPwd").focus();
            }
		}
	}
	//判断账号密码是否为空
	function isLogidNull() {
		if($("#loginName").val()==""){
			$("#prompt").html("账号不能为空...")
			$("#loginName").focus();
			return false;
		}
		$("#prompt").html("")
		if($("#loginPwd").val()==""){
			$("#loginPwd").focus();
			return false;
		}
		return true;
	}

</script>

</body>
</html>
